<template>
	<view>
		<Header title="联系我们"></Header>
		<view class="bubble-background">
			<view class="bubble-one"></view>
		</view>
		<view class="container">
			<!-- 头像，名称，班级，学校 -->
			<view class="user-avatar-school">
				<!-- <view class="corner-mark-box">
					<image src="@/static/cornerMark.png" mode=""></image>
				</view> -->
				<view class="avatar-box">
					<image src="../../static/userCode.png" class="avatar"></image>
				</view>
				<view class="school-name">
					<view class="name">{{info.ownerName || '---'}}<text>{{info.isSign?'已签约代扣':(info.isGather?'已采集未签约':'未采集')}}</text></view>
					<view class="school">{{info.organizationName}}</view>
					<view class="school">{{info.gradeName}}</view>
					<view style="display: flex;align-items: center;font-size: 24upx;	">
						<view :class="info.cardNo?'':'trans'">卡号：{{info.cardNo}}</view>
					</view>
				</view>
			</view>
			
			<!-- 按钮 -->
			<view class="box">
				<view class="btn-box" @click="callPhone">
					<image src="../../static/icon/icon_callme.png" mode=""></image>
					<view>点我打电话联系客服</view>
				</view>
				
				<view class="btn-box complaint" @click="changeComplaint" v-if="isShowComplaint">
					<view>投诉建议</view>
					<image src="../../static/icon/icon_singe.png" :class="show?'up':'down'"></image>
				</view>
				
				<view class="complaint-box" v-if="show" :class="show?'show-height':'hidden-height'">
					<!-- <view>投诉建议</view> -->
					<view class="label">
						<view class="title">投诉原因</view>
						<view class="selected">
							<picker class="pickers" mode="selector" :range="causeList" @change="changeCause" :value="index" :range-key="'cause'">
								<view class="pickers">
									<view :class="index==-1?'plader':''">{{causeList[index].cause || '请选择您遇到的问题'}}</view>
									<image src="../../static/img/go.png" mode=""></image>
								</view>
								
							</picker>
						</view>
					</view>
					<view class="label">
						<view class="title">联系电话</view>
						<view class="selected ipt">
							<input type="text" v-model="upData.phone" placeholder="便于商家和您联系" placeholder-style="font-size:13px;" />
						</view>
					</view>
					<view class="label">
						<view class="title">补充描述</view>
						<view class="selected tarea">
							<textarea v-model="upData.description" placeholder="描述投诉该订单的原因" id="" cols="30" rows="10"></textarea>
						</view>
					</view>
					<view class="label">
						<view class="title attention-title">图片凭证<text>*请上传支付截图</text></view>
						<view class="pic-list">
							<block v-for="(item,index) in upData.imgUrls" :key="index">
								<view class="pic">
									<image class="pic" :src="item"></image>
									<view class="delete-pic" @click="deletePic(index)">×</view>
								</view>
							</block>
							<view v-if="upData.imgUrls.length<3" class="add-pic" @click="chooseImg()"></view>
							<!-- <button id="agree-btn" v-if="upData.imgUrls.length<3" class="add-pic" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization= 'handleAgreePrivacyAuthorization'></button> -->
						</view>
					</view>
					<view class="btn" @click="submit">提交</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { SHOW_COMPLAINT } from '@/config.js';
	export default {
		data() {
			return {
				isShowComplaint: SHOW_COMPLAINT,
				info:uni.getStorageSync('info'),
				baseUrl: getApp().globalData.baseUrl,
				show: false,
				index: -1,
				causeList:[
					{cause:'---',id: -1}
				],
				upData:{
					phone: '',
					description: '',
					imgUrls:[],
				},
				
				showPrivacy: false
			}
		},
		onLoad(e) {
			 // wx.getPrivacySetting({
				//  success: res=>{
				//  }
			 // })
			 // wx.onNeedPrivacyAuthorization(resolve => {
			 //    this.showPrivacy= true
			 //    this.resolvePrivacyAuthorization = resolve
			 //  })
			  
			this.getType()
		},
		methods: {
			handleAgreePrivacyAuthorization(){
				 // this.resolvePrivacyAuthorization({ buttonId: 'agree-btn', event: 'agree' })
				 wx.requirePrivacyAuthorize({
				   success: (e) => {
				     // 用户同意授权
				     // 继续小程序逻辑
				   },
				   fail: () => {}, // 用户拒绝授权
				   complete: () => {}
				 })
			},
			callPhone() {
				if(!this.info.organizationPhone){
					return uni.showModal({
						content: '您还未登录，请扫一校一码进行登录。',
						showCancel: false,
						success: (res) => {
							
						}
					});
				}
				uni.makePhoneCall({
					phoneNumber: this.info.organizationPhone
				});
			},
			getType(){
				this.$http('/service/api/dictionaries/cause',{},res=>{
					if(res.data.succeeded){
						this.causeList = res.data.data
					}
				})
			},
			deletePic(index){
				this.upData.imgUrls.splice(index,1)
			},
			guid() {
				return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
					var r = Math.random() * 16 | 0,
						v = c == 'x' ? r : (r & 0x3 | 0x8);
					return v.toString(16);
				});
			},
			
			chooseImg() {
				let that = this
				uni.chooseImage({
				// uni.chooseMedia({
					count: 1,
					success(imgRes) {
						// if(imgRes.tempFiles[0].size<200000){
						// if(imgRes.tempFiles[0].size<307200){
							that.uploadFile(imgRes.tempFilePaths[0],1)
							return ;
						// }
						uni.getImageInfo({
							src: imgRes.tempFilePaths[0],
							success(res) {
								let canvasWidth = res.width //图片原始长宽
								let canvasHeight = res.height
								let canvas = document.createElement('canvas');
								let ctx = canvas.getContext('2d')
								canvas.width = canvasWidth/2
								canvas.height = canvasHeight/2
								let img = new Image()
								img.src = res.path
								img.onload=()=>{
									ctx.drawImage(img, 0, 0, canvasWidth/2, canvasHeight/2)
									canvas.toBlob((fileSrc)=>{
										that.uploadFile(fileSrc,2)
									},imgRes.tempFiles[0].type,0.4)
								}
							}
						})
					}
				})
			},
			uploadFile(path,y) {
				let file
				if(y==2){
					 file = new File([path],new Date().getTime() + '.png')
				}
					let that = this
					uni.uploadFile({
						url:  this.baseUrl + '/service/api/PubApplyRefund/upload', //仅为示例，非真实的接口地址
						name: 'file',
						filePath: y==1?path:'',
						file: y==2?file:'',
						success: (uploadFileRes) => {
							let returnData = JSON.parse(uploadFileRes.data)
							if(!returnData.succeeded){
								return uni.showToast({
									title: returnData.errors,
									icon: 'none'
								})
							}
							let datas = returnData.data
							let picUrl = `${datas.domainName}${datas.fileUrl}`
							this.upData.imgUrls.push(picUrl)
						},
						fail(err) {
						}
					});
			},
			changeCause(e){
				if(this.index == e.detail.value) return ;
				this.index = e.detail.value
			},
			changeComplaint(){
				this.show = !this.show
			},
			showMyTost(title){
				uni.showToast({
					title,
					icon:'none'
				})
			},
			addRefundApply(data){
				this.$http('/service/api/PubApplyRefund/add',data,res=>{
					if(res.data.succeeded){
						this.showMyTost('提交成功')
						this.show = false
					}else{
						uni.showToast({
							title: JSON.stringify(res.data.errors),
							icon: 'none'
						})
					}
				})
			},
			submit(){
				let data = {
							phone: this.upData.phone,
							imgUrls: this.upData.imgUrls,
							description: this.upData.description,
							complaintType: 2,
							causeId: this.causeList[this.index].id,
							tenantId: this.info.tenantId
						}
				uni.showModal({
					content: '是否确认提交？',
					success: (res) => {
						this.addRefundApply(data)
					}
				})
			},
		}
	}
</script>

<style scoped lang="less">
	.up{
		transition: all 0.4s;
		transform: rotateX(180deg);
		transform-origin: 0 50%;
	}
	.down{
		transition: all 0.4s;
		transform: rotateX(0deg);
		transform-origin: 0 50%;
	}
	.user-avatar-school{
		padding: 30upx 20upx 60upx;
		display: flex;
		position: relative;
		.corner-mark-box{
			width: 170rpx;
			height: 156rpx;
			position: absolute;
			right: -26rpx;
			top: -26rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.avatar-box{
			width: 120upx;
			height: 120upx;
			border-radius: 50%;
			padding: 10upx;
			background: #fff;
			margin-right: 36upx;
			.avatar{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.school-name{
			>view{margin-top: 16upx;}
			.name{ font-size: 32upx; text{ font-size: 24upx;margin-left: 6upx; color: #fa4472; }}
			.school{ font-size: 26upx; width: 456upx; }
			.trans{ color: transparent; }
		}
	}
	.plader{
		color: #808080
	}
	.box{
		border-radius: 16upx;
		background: #fff;
		// box-shadow: 0 0 15upx rgba(247, 200, 122, .2);
		box-shadow: 0 3upx 20upx 1upx rgba(247, 200, 122, .2);
		padding: 20upx;
		.btn-box{
			width: 590upx;
			height: 80upx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			border-radius: 16upx;
			// background: #49b9ad;
			background: linear-gradient(to right, #feb519, #ff9906, #ff9201);
			font-size: 28upx;
			image{
				width: 30upx;
				height: 30upx;
				margin-right: 16upx;
			}
		}
		.btn-box~.btn-box{
			margin-top: 20upx;
		}
		.complaint{
			flex-direction: column;
			image{
				width: 24upx;
				height: 12upx;
			}
		}
	}
	
	.complaint-box{
		margin-top: 26upx;
		.label{
			padding: 36upx 0 20upx;
			font-size: 26upx;
			width: 590upx;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			border-bottom: 1px solid #f7f7f7;
			.title{
				width: 140upx;
			}
			.attention-title{
				width: 100%;
				text{
					font-size: 22upx;
					color: red;
					margin-left: 18upx;
				}
			}
			.selected.ipt{
				width: 450upx;
			}
			.pickers{
				width: 450upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 26upx;
				image{
					width: 20upx;
					height: 20upx;
				}
			}
			.selected.tarea{
				width:590upx;
				height: 160upx;
				textarea{
					width: 100%;
					height: 100%;
					padding: 20upx 10upx 10upx;
					font-size: 26upx;
				}
			}
			.pic-list{
				margin: 36upx 0 20upx;
				width: 590upx;
				height: 190upx;
				display: flex;
				align-items: center;
				.pic{
					width: 190upx;
					height: 190upx;
					border-radius: 12upx;
					position: relative;
					image{
						width: 100%;
						height: 100%;
						border-radius: 12upx;
					}
					.delete-pic{
						position: absolute;
						width: 24upx;
						height: 24upx;
						border-radius: 50%;
						background: red;
						text-align: center;
						line-height: 24upx;
						font-size: 16upx;
						color: #fff;
						right: 0;
						top: 0;
					}
				}
				.pic~.pic{
					margin-left: 10upx;
				}
				.add-pic{
					width: 190upx;
					height: 190upx;
					background: #f4f4f4;
					border-radius: 16upx;
					position: relative;
					margin-left: 10upx;
				}
				.add-pic::before{
					content: '';
					display: inline-block;
					width: 60upx;
					height: 6upx;
					background: #ababab;
					position: absolute;
					left: 65upx;
					top: 92upx;
				}
				.add-pic::after{
					content: '';
					display: inline-block;
					width: 6upx;
					height: 60upx;
					background: #ababab;
					position: absolute;
					left: 92upx;
					top: 65upx;
				}
			}
		}
		.btn{
			width: 100%;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			border-radius: 16upx;
			color: #fff;
			background: linear-gradient(to right, #feb519, #ff9906, #ff9200);
			margin: 160upx 0 40upx;
		}
	}
	.bubble-background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		z-index: -1;
		.bubble-one{
			position: absolute;
			top: -5%;
			left: -2%;
			width: 240rpx;
			height: 240rpx;
			border-radius: 50%;
			background: linear-gradient(to bottom right, #ffa227 0%, #fbb553 50%, #f7c678 100%);
			// opacity: 0.5;
			z-index: -2;
		}
	}
	 
	.bubble-background::before,
	.bubble-background::after {
		content: '';
		position: absolute;
		width: 220rpx;
		height: 220rpx;
		border-radius: 50%; 
		background: rgba(255, 255, 255, .4);
		background: linear-gradient(to bottom right, #ffa227 0%, #fbb553 50%, #fffdfb 100%);
		// opacity: 0.5;
	}
	 
	.bubble-background::before {
		top: 4%;
		left: -8%;
	}
	 
	.bubble-background::after {
		width: 170rpx;
		height: 170rpx;
		top: 8%;
		right: -6%;
	}
</style>
